<template xmlns="http://www.w3.org/1999/html">
  <div>
<!--搜索框    -->
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
                v-model="page.seckillName"></el-input>
      <el-date-picker
        v-model="page.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择开始日期">
      </el-date-picker>
      ----
      <el-date-picker
        v-model="page.stopTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择结束日期">
      </el-date-picker>

<!--      <el-date-picker
        v-model="activityDate"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>-->

      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

<!--上方添加、删除按钮    -->
    <div style="margin: 10px 0">
      <el-button type="primary" class="ml-5" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
        class="ml-5"
        confirm-button-text='确定'
        cancel-button-text='我再想想'
        icon="el-icon-info"
        icon-color="red"
        title="您确定批量删除这些数据吗？"
        @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
    </div>

<!--table表格    -->
    <el-table :data="tableData" v-loading="loading" border element-loading-text="拼命加载中" :header-cell-class-name="'headerBg'"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="seckillNumber" label="编号"></el-table-column>
      <el-table-column prop="seckillName" label="活动名称"></el-table-column>
      <el-table-column prop="seckillCount" label="商品数量"></el-table-column>
      <el-table-column prop="seckillStatus" label="活动状态">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.seckillStatus === '0'">未开始</el-tag>
          <el-tag type="warning" v-if="scope.row.seckillStatus === '1'">进行中</el-tag>
          <el-tag type="success" v-if="scope.row.seckillStatus === '2'">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="peopleNum" label="活动参加人数"></el-table-column>
      <el-table-column prop="activityDate" label="活动时间"></el-table-column>
      <el-table-column label="是否下架">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.seckillType" active-color="#13ce66" inactive-color="#ccc"
                     @change="updateSType(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="350" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="look(scope.row)">查看详情
            <i class="el-icon-remove-outline"></i></el-button>
          <el-button type="warning" @click="updateSeckill(scope.row)">修改
            <i class="el-icon-remove-outline"></i></el-button>
          <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='我再想想'
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除吗？"
            @confirm="delSeckill(scope.row)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页    -->
    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

<!--查看详情弹窗    -->
    <el-dialog title="秒杀时段列表" :visible.sync="dialogFormVisible1" width="80%">
      <el-button type="primary" class="ml-5" @click="addActivity">新增
        <i class="el-icon-circle-plus-outline"></i></el-button>

      <el-table :data="activityData" v-loading="loading" border element-loading-text="拼命加载中" stripe :header-cell-class-name="'headerBg'"
                >
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="actNumber" label="编号"></el-table-column>
        <el-table-column prop="actCount" label="商品数量"></el-table-column>
        <el-table-column prop="startTime" label="时段"></el-table-column>
        <el-table-column prop="activityDate" label="开始时间 -- 结束时间"></el-table-column>
        <el-table-column prop="actStatus" label="活动状态">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.actStatus === '0'">未开始</el-tag>
            <el-tag type="warning" v-if="scope.row.actStatus === '1'">进行中</el-tag>
            <el-tag type="success" v-if="scope.row.actStatus === '2'">已结束</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.actType" active-color="#13ce66" inactive-color="#ccc"
                       @change="updateVType(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="look(scope.row)">商品列表
              <i class="el-icon-remove-outline"></i></el-button>
            <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--          添加/修改秒杀活动弹窗-->
    <el-dialog title="活动信息" :visible.sync="dialogFormVisible" width="40%">
      <el-form label-width="80px" size="small">
        <el-form-item label="标题">
          <el-input v-model="form.seckillName" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item label="活动时间">
          <el-date-picker
            v-model="form.startTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择开始日期">
          </el-date-picker>
          ----
          <el-date-picker
            v-model="form.stopTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="是否下架">

          <el-radio v-model="form.seckillType" label="1">是</el-radio>
          <el-radio v-model="form.seckillType" label="0">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="mshdSave">确 定</el-button>
      </div>
    </el-dialog>

    <!--          添加/修改秒杀时段弹窗-->
    <el-dialog title="秒杀时段信息" :visible.sync="dialogFormVisible2" width="40%">
      <el-form label-width="80px" size="small">
        <el-form-item label="商品数量">
          <el-input v-model="activityForm.vCount" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="秒杀时段">
          <el-time-picker
            v-model="activityForm.startTime"
            value-format="HH:mm:ss"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="开始时间点"
            style="width: 190px"
          >
          </el-time-picker>
          ----
          <el-time-picker
            v-model="activityForm.stopTime"
            value-format="HH:mm:ss"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }"
            placeholder="结束时间点"
            style="width: 190px"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio v-model="activityForm.vType" label="0">是</el-radio>
          <el-radio v-model="activityForm.vType" label="1">否</el-radio>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="hdsdSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  delSeckill,
  getCount,
  look,
  saveActivity,
  saveSeckill,
  seckillList,
  updateSType, updateVType
} from "../../api/mallMG.js";

export default {
  name: "Seckill",
  data(){
    return {
      tableData: [],
      multipleSelection: [],
      page:{
        pageNum: 1,
        pageSize: 2,
        seckillName: "",
        startTime: "",
        stopTime: "",

      },
      total: 0,
      form: {},
      activityForm: {},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      activityData: [],
      seckillId: '',
      loading: false, //是显示加载
    }
  },
  created() {
    this.load()
  },
  methods: {
    //分页全查
    load() {
      console.log("------全查请求------")
      console.log(this.page)
      this.loading = true
      seckillList(this.page).then(res1=>{
        this.loading = false
        console.log(res1)
        if(res1.code === 200){

          res1.data.records.forEach(res2 =>{
            // 拼接活动时间
            res2.activityDate = res2.startTime + "----"+ res2.stopTime

            //商品数量
            let ss = {
              "seckillNumber": res2.seckillNumber
            }
            getCount(ss).then(res3 => {
              console.log("-----------------------------------")
              console.log(res3)
              res2.seckillCount = res3.data
            })

          })

          this.tableData = res1.data.records
          this.total = res1.data.total

        }else{
          this.$message({
            type:'error',
            message:'请求失败'
          })
        }
      })
    },

    //查看
    look(row){
      this.dialogFormVisible1 = true
      this.loading = true
      console.log("----------查看请求-------------")
      this.seckillId = row.seckillNumber
      console.log(this.seckillId)
      look(row).then(res => {

        if(res.code === 200){
          console.log(res.data)
          this.loading = false
          res.data.forEach(res => {
            // 拼接活动时间
            res.activityDate = res.startTime +"----"+res.stopTime

          })

          this.activityData = res.data
        }else{
          this.$message({
            type:'error',
            message:'请求失败'
          })
        }
      })
    },

    //添加活动弹窗
    handleAdd(){
      this.dialogFormVisible = true
      this.form = {}
    },

    //秒杀活动添加、修改
    mshdSave(){
      console.log("--------秒杀活动添加、修改--------")
      console.log(this.form)
      saveSeckill(this.form).then(res => {
        console.log(res.data)
        if (res){
          this.dialogFormVisible = false
          this.load()
          this.$message.success("添加成功")
        }else {
          this.$message.success("添加失败")
        }
      })

    },

    //添加活动时段弹窗
    addActivity(){
      this.dialogFormVisible2 =true
      this.activityForm = {}
    },

    //活动时段添加
    hdsdSave(){
      console.log("--------活动时段添加--------")
      this.activityForm.seckillId = this.seckillId
      console.log(this.activityForm)
      saveActivity(this.activityForm).then(res => {
        console.log(res.data)
        if (res){
          this.dialogFormVisible2 = false
          this.dialogFormVisible1 = false
          this.load()
          this.$message.success("添加成功")
        }else {
          this.$message.success("添加失败")
        }
      })

    },


    //修改活动信息弹窗
    updateSeckill(row){
      this.dialogFormVisible = true
      this.form = row
    },




    //修改活动是否下架
    updateSType(row) {
      updateSType(row).then(res => {
        console.log(res)
        if (res.code == '200') {
          this.$message.success("操作成功")
        }else {
          this.$message.success(res.msg)
          this.load()
        }
      })
    },


    //修改活动时段是否启用
    updateVType(row) {
      updateVType(row).then(res => {
        console.log(res)
        if (res.code == '200') {
          this.$message.success("操作成功")
        }else {
          this.$message.success(res.msg)
          let aa = {
            "seckillNumber": row.seckillId
          }
          this.look(aa)
        }
      })
    },


    //删除活动
    delSeckill(row) {
      delSeckill(row).then(res => {
        if (res.code == '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      this.request.post("/file/del/batch", ids).then(res => {
        if (res.code === '200') {
          this.$message.success("批量删除成功")
          this.load()
        } else {
          this.$message.error("批量删除失败")
        }
      })
    },

    reset() {
      this.page.seckillName = ""
      this.page.stopTime= ''
      this.page.startTime= ''
      this.load()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.page.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.page.pageNum = pageNum
      this.load()
    },



  }
}
</script>

<style>

.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>

